<template>
    <div >
        <basic-container>
            <avue-tabs :option="option" @change="handleChange"></avue-tabs>
            <span v-if="type.prop==='tab1'">
                          <div style="display:flex">
                        <avue-tree style="width:200px;margin-right:10px;padding-top:28px;" :data="treeData" :option="treeOption"

                                   @node-click="nodeClick"></avue-tree>
                                <div class="table-container ">
                        <avue-crud :data="data" :option="tableOption"     :page="page"
                                   @current-change="handleCurrentChange"
                                   :table-loading="tableLoading">
                         <template slot-scope="scope"  slot="approveStatus">
                    <el-tag  v-if="scope.row.approveStatus === 0" :type="scope.row.approveStatus === 1 ? 'success' : 'primary'" disable-transitions>未审核</el-tag>
                <el-tag  v-if="scope.row.approveStatus === 1"  :type="scope.row.approveStatus === 1 ? 'success' : 'primary'" disable-transitions>已审核</el-tag>
            </template>
        <template slot-scope="props"
                  slot="expand">
          <el-form label-position="left"
                   inline
                   class="demo-table-expand">
            <el-form-item label="特征名称">
              <span>{{props.row.featureName}}</span>
            </el-form-item>
            <el-form-item label="类型">
              <span>{{props.row.type}}</span>
            </el-form-item>
            <el-form-item label="审核状态">
              <span>{{props.row.approveStatus}}</span>
            </el-form-item>
            <el-form-item label="提交人">
              <span>{{ props.row.userId}}</span>
            </el-form-item>
              <el-form-item label="上级ID">
              <span>{{props.row.parentId}}</span>
            </el-form-item>
          </el-form>
        </template>
        <template slot-scope="scope" slot="menu"  >
          <el-button type="primary"
                     icon="el-icon-view"
                     size="small"
                     @click.stop="handleView(scope.row,scope.index)">查看</el-button>
          <el-button type="primary"
                     icon="el-icon-edit"
                     size="small"
                     @click.stop="handleEdit(scope.row,scope.index)"  >编辑</el-button>
          <el-button type="danger"
                     icon="el-icon-delete"
                     size="small"
                     @click.stop="handleDel(scope.row,scope.index)">删除</el-button>


        </template>
                        </avue-crud>
                                </div>
                    </div>
            </span>
            <span v-else-if="type.prop==='tab2'">选项卡内容2</span>
            <span v-else-if="type.prop==='tab3'">选项卡内容3</span>


                <!--<template>-->
                <!--<avue-tree style="width:200px;margin-right:10px;padding-top:28px;" :data="treeData" :option="treeOption" @node-click="nodeClick"></avue-tree>-->

                <!--</template>-->
        </basic-container>
    </div>
</template>
<script>
    import {featureTreeClass,checkSuccessApply,featurePage} from '@/api/store/StoreFeature/StoreFeature';
    import { storeFeatureOption } from "@/const/store/StoreFeature/StoreFeatureTableOption.js";


    export default {
        data() {
            return {
                tableOption:storeFeatureOption,
                tableLoading:false,
                treeData: [],
                data:[],
                treeOption: {
                    nodeKey: 'id',
                    addBtn:false,
                    props: {
                        labelText: '标题',
                        label: 'label',
                        value: 'value',
                        children: 'children'
                    }
                },
                obj: {},
                type:{},
                option:{
                    column: [{
                        icon:'el-icon-info',
                        label: '显示列表',
                        prop: 'tab1',
                    }, {
                        icon:'el-icon-warning',
                        label: '申请列表',
                        prop: 'tab2',
                    }, {
                        icon:'el-icon-question',
                        label: '选项卡3',
                        prop: 'tab3',
                    }]
                },
                page: {
                    total: 10, //总页数
                    currentPage: 1, //当前页数
                    pageSize: 20 //每页显示多少条
                },
            }
        },
        created () {
            this.tableLoading = true;
            this.type = this.option.column[0];

            this.handleList();
        },
        methods: {
            handleChange(column) {
                this.type = column
                this.$message.success(JSON.stringify(column))
            },
            handleList () {
                featureTreeClass().then(res => {``
                    this.treeData = res.data.data[0];
                    this.tableLoading = false;
                    this.data = res.data.data[1].records;
                    this.page = {
                        total: res.data.data[1].total,
                        pageSize: res.data.data[1].size,
                    };
                });
            },
            rowSave(row, done, loading) {
                this.$message.success('当前数据' + JSON.stringify(this.obj))
                done();
            },
            rowUpdate(row, index, done, loading) {
                this.$message.success('当前数据' + JSON.stringify(this.obj))
                done();
            },
            rowDel(row, index) {
                this.$message.success('删除的数据' + JSON.stringify(this.obj))
            },
            submit() {
                this.$message.success('当前数据' + JSON.stringify(this.obj))
            },
            change(item) {
                this.type = item.prop;
                this.$message.success('当前选项卡对象' + JSON.stringify(item.prop))
            },
            nodeClick(data){
                this.page={
                    total: 10, //总页数
                    currentPage: 1, //当前页数
                    pageSize: 20 //每页显示多少条
                },
                this.tableLoading = true;

                featurePage({current: this.page.currentPage,id: data.id}).then(res => {
                    setTimeout(() => {
                        this.data = res.data.data.records;
                        this.page = {
                            total: res.data.data.total,
                            pageSize: res.data.data.size,
                        };
                        this.tableLoading = false;
                        }, 1000);
                });
            },
            handleCurrentChange(val){
                this.page.currentPage=val;
                this.handleList();

            },
        }
    }
</script>
<style lang="scss">
    .table-container {
        padding: 8px 10px;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
<!--<template>-->
<!--<div>-->
<!--<basic-container>-->
<!--<span style="color:sandybrown">审核列表</span>-->

<!--<avue-tree-table :option="option" >-->
<!--<el-table-column label="特征名称">-->
<!--<template slot-scope="scope">-->
<!--<span style="color:sandybrown">{{scope.row.featureName}}</span>-->
<!--</template>-->
<!--</el-table-column>-->
<!--<el-table-column label="申请店铺">-->
<!--<template slot-scope="scope">-->
<!--<el-popover trigger="hover" placement="top">-->
<!--<p>姓名: {{ scope.row.shopName }}</p>-->
<!--<div slot="reference" class="name-wrapper">-->
<!--<el-tag size="medium">{{ scope.row.shopName }}</el-tag>-->
<!--</div>-->
<!--</el-popover>-->
<!--</template>-->
<!--</el-table-column>-->
<!--<el-table-column label="所属分类">-->
<!--<template slot-scope="scope">-->
<!--<span style="color:sandybrown">{{scope.row.className}}</span>-->
<!--</template>-->
<!--</el-table-column>-->
<!--<el-table-column label="类型">-->
<!--<template slot-scope="scope">-->
<!--<el-tag  v-if="scope.row.type === 1"-->
<!--:type="'info'"-->
<!--disable-transitions>规格</el-tag>-->
<!--<el-tag  v-if="scope.row.type === 0"-->
<!--:type="'info'"-->
<!--disable-transitions>属性</el-tag>-->
<!--</template>-->
<!--</el-table-column>-->
<!--<el-table-column label="级别">-->
<!--<template slot-scope="scope">-->
<!--<span style="color:sandybrown">{{scope.row.level}}</span>-->
<!--</template>-->
<!--</el-table-column>-->
<!--<el-table-column-->
<!--label="状态"-->
<!--width="100"-->
<!--&gt;-->

<!--</el-table-column>-->

<!--<el-table-column label="操作"-->
<!--width="200">-->
<!--<template slot-scope="scope" v-if="(scope.row.approveStatus<1)">-->
<!--<el-button   type="text"-->
<!--@click="checkSuccess(scope.row)">通过</el-button>-->
<!--<el-button type="text"-->
<!--@click="message(scope.row)">拒绝</el-button>-->
<!--</template>-->

<!--</el-table-column>-->
<!--</avue-tree-table>-->
<!--<div style="display:flex">-->
<!--<avue-tree style="width:200px;margin-right:10px;padding-top:28px;" :data="treeData" :option="treeOption" @node-click="nodeClick"></avue-tree>-->
<!--<avue-crud :data="data" :option="option"></avue-crud>-->
<!--</div>-->
<!--</basic-container>-->
<!--</div>-->

<!--</template>-->

<!--<script>-->


<!--export default {-->
<!--name: 'tableAllTree',-->
<!--components: {},-->
<!--data () {-->
<!--return {-->

<!--option: {-->
<!--expandAll: false,-->
<!--index:false,-->
<!--data: {},-->
<!--page:false,-->
<!--align:'center',-->
<!--menuAlign:'center',-->
<!--column:[-->
<!--{-->
<!--label:'姓名',-->
<!--prop:'name'-->
<!--}, {-->
<!--label:'性别',-->
<!--prop:'sex'-->
<!--}-->
<!--]-->
<!--},-->
<!--obj:{},-->
<!--data: [-->
<!--{-->
<!--name:'张三',-->
<!--sex:'男'-->
<!--}, {-->
<!--name:'李四',-->
<!--sex:'女'-->
<!--}, {-->
<!--name:'王五',-->
<!--sex:'女'-->
<!--}, {-->
<!--name:'赵六',-->
<!--sex:'男'-->
<!--}-->
<!--],-->
<!--treeData:[-->
<!--{-->
<!--id:0,-->
<!--label:'一级部门',-->
<!--value:0,-->
<!--children:[-->
<!--{-->
<!--id:1,-->
<!--label:'一级部门1',-->
<!--value:0,-->
<!--},{-->
<!--id:2,-->
<!--label:'一级部门2',-->
<!--value:0,-->
<!--}-->
<!--]-->
<!--},{-->
<!--id:3,-->
<!--label:'二级部门',-->
<!--value:0,-->
<!--children:[-->
<!--{-->
<!--id:4,-->
<!--label:'二级部门1',-->
<!--value:0,-->
<!--},{-->
<!--id:5,-->
<!--label:'二级部门2',-->
<!--value:0,-->
<!--}-->
<!--]-->
<!--}-->
<!--],-->
<!--treeOption:{-->
<!--nodeKey:'id',-->
<!--props:{-->
<!--labelText:'标题',-->
<!--label:'label',-->
<!--value:'value',-->
<!--children:'children'-->
<!--}-->
<!--}-->
<!--}-->
<!--},-->

<!--methods: {-->

<!--/**-->
<!--* @title 审核通过-->
<!--* @detail 调用接口修改后台数据状态-->
<!--*-->
<!--**/-->
<!--checkSuccess (row) {-->
<!--checkSuccessApply(row.id).then(res => {-->
<!--this.handleList();-->

<!--this.$message({-->
<!--showClose: true,-->
<!--message: "审批成功",-->
<!--type: "success"-->
<!--});-->
<!--})-->
<!--},-->
<!--/**-->
<!--* @title 获取数据-->
<!--* @detail 赋值为tableData表格即可-->
<!--*-->
<!--**/-->



<!--}-->
<!--}-->
<!--</script>-->
